<template>
  <div class="login">
    <div class="login-wrapper">
      <div class="login-section">
        <!-- 登录界面 -->
        <!-- 
          el-form  表单组件
              :model="ruleForm" model	表单数据对象	object
              status-icon       是否在输入框中显示校验结果反馈图标	boolean	—	false
              :rules="rules"    表单验证规则	      object
              ref="ruleForm"    获取当前组件实例
              label-width="100px" 表单域标签的宽度
          el-form-item 表单组件每一项内容
              label="密码" 当前标签内容
              prop="pass"  表单域 model 字段 必须写
              required	是否必填，如不设置，则会根据校验规则自动生成

        -->
        <el-form
          :model="loginForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="账号" prop="username">
            <el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="loginForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="login-right"></div>
    </div>
  </div>
</template>

<script>
import { login } from "../../api/login";
export default {
  data() {
    //密码校验规则
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        //可以再次判断value得格式等
        callback();
      }
    };
    var validateUser = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        //表单数据
        username: "",
        pass: ""
      },
      rules: {
        //校验规则
        pass: [
          //密码校验规则
          { validator: validatePass, trigger: "blur" }
        ],
        username: [
          //账号校验规则
          { validator: validateUser, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    //提交按钮-触发事件--------------------------------
    submitForm(formName) {
      // console.log("formName", this.$refs.ruleForm, this.$refs[formName]);
      //validate	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段
      this.$refs[formName].validate(async valid => {
        if (valid) {
          //返回boolean  true校验通过--说明可以去登录功能
          // console.log("true校验通过--说明可以去登录功能");
          // console.log("获取当前输入得表单数据", this.loginForm);
          //请求接口---获取后端返回token信息
          console.log("login", login);
          let res = await login({
            username: this.loginForm.username,
            password: this.loginForm.pass
          });
          console.log("登录接口------", res.data);
          //获取登录得信息 1.本地存储 2. 可以考虑vuex--练习
          let {user,token} = res.data
          let userinfo={
            user,
            token
          }
          //存储vuex 
          this.$store.commit('User/setUser',userinfo)
          //存储本地
          // localStorage.setItem('userinfo',JSON.stringify(userinfo))
          //跳转界面  1. 标签导航 router-link  2. 编程式 this.$router.push()
          this.$router.push('/')

        } else {
          //校验不通过
          console.log("校验不通过");
          return false;
        }
      });
    },
    //重置按钮---触发事件-----------------------
    resetForm(formName) {
      //resetFields()	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style scoped lang='less'>
.login {
  width: 100%;
  height: 100%;
  min-width: 960px;
  min-height: 765px;
  background: url("../../assets/images/bg.jpg") top/cover no-repeat;
  display: flex;
  align-items: center;
  .login-wrapper {
    width: 700px;
    height: 400px;
    margin: auto;
    display: flex;
  }
  .login-section {
    width: 340px;
    height: 340px;
    background: #fff;
    padding: 30px 20px;
  }
  .login-right {
    width: 320px;
    height: 400px;
    background: url("https://fes.qyerstatic.com/FoLbAXJtwbB5SVORRmihPFWD-oYM")
      top/cover no-repeat;
  }
}
</style>